<template>
	<view class="qiugou-content">
		<u-form :model="form" ref="uForm">
			<u-form-item class="wantName" label="求购商品" label-width='160' label-align='center'>
				<u-input v-model="form.name" input-align='right' :clearable='false' placeholder="请输入求购商品名称(必填)"
					placeholder-style="margin-left:-20rpx" />
			</u-form-item>
			<view class="twoBox">
				<u-form-item class="wantnum" label="商品数量" label-width='160' label-align='center'>
					<text>1</text>
				</u-form-item>
				<u-form-item label="意向价格" label-width='160' label-align='center'>
					<u-input type="number" :clearable='false' v-model="form.wantPrice" input-align='right'
						placeholder="请输入意向(必填)" placeholder-style="margin-left:-20rpx" />
					<text class=" u-p-l-10">￥</text>
				</u-form-item>

				<u-form-item label="添加备注" label-width='160' label-align='center'>
					<u-input type="number" :clearable='false' v-model="form.beizhu" input-align='right'
						placeholder="(选填)" placeholder-style="margin-left:-20rpx" />
				</u-form-item>
			</view>

			<view class="three-box">
				<u-form-item>
					<textarea class="productDetails" value="" placeholder="请输入商品的详情(必填)" maxlength='-1' />
				</u-form-item>
			</view>

			<view class="four-box">
				<view class="text">
					上传求购图片(选填)
				</view>
				<u-form-item :border-bottom='false'>
					<u-upload :action="action" max-count='1'></u-upload>
				</u-form-item>
			</view>


		</u-form>

		<view class="buttonBox">
			<u-button class="firstbtn" size="default" type="error">点击上传</u-button>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					wantPrice: '', //意向价格
					beizhu: '', //商品备注
					value: '' //商品详情
				},
				action: 'http://www.example.com/upload', //商品图片服务器上传地址
			};
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #eee;
	}

	.qiugou-content {

		.wantName {
			margin: 30rpx 0;
			background-color: #FFFFFF;

			/deep/.uni-input-input {
				margin-left: -20rpx;
			}
		}

		.twoBox {
			background-color: #FFFFFF;

			/deep/.uni-input-input {
				margin-left: -20rpx;
			}

			.wantnum {
				text {
					flex: 1;
					text-align: right;
					padding-right: 50rpx;

				}
			}
		}

		.three-box {
			/deep/ .u-form-item__body {
				background-color: #FFFFFF;

				.productDetails {
					height: 200rpx;
					width: 730rpx;
					padding: 0 20rpx;
					padding-top: 20rpx;
				}
			}

		}

		.four-box {

			.text {
				color: #6d6d6d;
				font-size: 16px;
				padding: 20rpx 0 0 20rpx;
			}

			/deep/ .u-form-item {
				padding: 10rpx 0 0 10rpx;
			}

			height: 300rpx;
			background-color: #FFFFFF;

		}

		.five-box {
			margin: 20rpx 0;

			.text {
				color: #6d6d6d;
				font-size: 16px;
				padding: 20rpx 0 0 20rpx;
			}

			/deep/ .u-form-item {
				padding: 10rpx 0 0 10rpx;
			}

			height: 300rpx;
			background-color: #FFFFFF;

		}

		.buttonBox {
			margin-top: 20rpx;
			padding-top: 50rpx;
			background-color: #ffff;
			height: 163rpx;

			.u-btn {
				width: 690rpx;

			}
		}

	}
</style>
